<style>
page {
	background-color: #F2F3F4;
	overflow: hidden;
	overflow-y: scroll;
}

.xiangqing {
	width: 100%;
	background-color: #0099ff;
	padding: 2em 0;
	color: #fff;
	border-bottom-left-radius: 1em;
	border-bottom-right-radius: 1em;
}

.xiangqing_q {
	width: 95%;
	background-color: #0099ff;
	overflow: auto;
	border-radius: 0.5em;
	margin: 0 auto;
}

.xiangqing_w {
	padding: 2em;
}

.xiangqing_e {
	font-size: 1.4em;
	font-weight: 900;
}

.xiangqing_r {
	font-size: 1.1em;
	font-weight: 900;
}

.xiangqing_t {
	width: 4em;
	height: 2em;
	margin: 0 auto;
}

.bai {
	width: 100%;
	height: 100%;
}

.yixuiand {
	width: 95%;
	margin: 0 auto;
	font-size: 1.8em;
	font-weight: 900;
	color: #fff;
	padding: 0 0 0.5em 0;
}

.bianjiziliao {
	width: 95%;
	background-color: #fff;
	margin: 1em auto;
	overflow: auto;
	border-radius: 1em;
}

.bianjiziliao_q {
	padding: 1em;
}

.bianjiziliao_w {
	padding: 1.2em 0;
	font-size: 1.3em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.bianjiziliao_e {
	width: 60%;
	float: right;
	text-align: right;
}

.tishixe {
	width: 1.5em;
	height: 1.5em;
	float: left;
}

.tishixe_q {
	float: left;
	line-height: 1.5em;
	text-indent: 1em;
	color: #666666;
	font-size: 1em;
}

.faqizhif {
	width: 95%;
	margin: 0 auto;
	height: 4em;
}

.faqizhif_q {
	float: left;
	position: relative;
	top: 1.5em
}

.faqizhif_w {
	float: left;
	text-indent: 2em;
	position: relative;
	top: 2em
}

.faqizhif_e {
	width: 100%;
	height: 7em;
}

.faqizhif_r {
	width: 100%;
	height: 6em;
	background-color: #fff;
	position: fixed;
	bottom: 0;
}

.faqizhif_t {
	width: 95%;
	margin: 1em auto;
	height: 4em;
}

.faqizhif_y {
	float: left;
	line-height: 4em;
	color: #0099ff;
	font-size: 1.2em;
}

.faqizhif_u {
	font-size: 1.4em;
	font-weight: 900;
}

.faqizhif_i {
	width: 50%;
	height: 4em;
	background-color: #0099ff;
	border-radius: 2em;
	float: right;
}

.faqizhif_o {
	text-align: center;
	color: #fff;
	font-size: 1.3em;
	font-weight: 900;
	line-height: 3em;
}

.faqizhif_p {
	text-align: center;
	color: #fff;
	font-size: 1.1em;
}

.baojia-card {
	background: #fff;
	border-radius: 10px;
	padding: 16px 12px;
	margin: 16px 0 0 0;
	box-shadow: 0 2px 8px #f5f5f5;
}

.baojia-card .flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.baojia-card .text {
	font-size: 1.1em;
	font-weight: 600;
}

.baojia-card .switch {
	transform: scale(0.9);
}

.baojia-card .margin-top {
	margin-top: 8px;
	color: #888;
	font-size: 0.95em;
}

.baojia-card .input-container {
	margin-top: 12px;
}

.baojia-card .input {
	width: 100%;
	border: 1px solid #eee;
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 1.1em;
}

.baojia-card .fee {
	color: #0099ff;
	font-size: 0.95em;
	margin-top: 6px;
}
</style>

<template>
	<view>
		<view class="xiangqing">

			<view class="yixuiand">已选服务：{{ fenleifen.name }}</view>
			<view class="xiangqing_q">
				<view class="xiangqing_w">
					<view class="xiangqing_e">{{ order_address.kaishidizhi_name }}</view>
					<view class="xiangqing_r">
						{{ order_address.kaishidizhi }}{{ order_address.kaishixiang ? order_address.kaishixiang : "" }}
					</view>
					<view class="xiangqing_t">
						<image src="@/static/xiangxia.gif" class="bai"></image>
					</view>
					<view class="xiangqing_e">{{ order_address.jishudizhi_name }}</view>
					<view class="xiangqing_r">
						{{ order_address.jishudizhi }}{{ order_address.jiesuxiang ? order_address.jiesuxiang : "" }}
					</view>
					距离：{{ order_address.julidegoglishu }} KM
				</view>
			</view>

			<view style="text-align: center;width: 100%;"><text
					style="background-color: #fff;border-radius: 0.3rem;padding: 0.3rem 0.5rem;color: #0099ff;;">

					{{ is_province == false && delivery_type == '20' ? "该城市市县网点自提" : "送货" }}

				</text></view>
		</view>
		<view class="bianjiziliao">

			<view class="bianjiziliao_q">
				<view class="bianjiziliao_w">发货人<view class="bianjiziliao_e">
						<input class="bai" @input="shuju_1fahuoren" type="text" placeholder="姓名/公司名称" />
					</view>
				</view>
				<view class="bianjiziliao_w">时间选择
					<view class="bianjiziliao_e">
						<picker mode="date" :value="shangmen_date" @change="onDateSelectChange">
							<view class="bai" style="text-align: right; padding: 0.5em 0;">
								{{ shangmen_date || '请选择日期' }}
							</view>
						</picker>
					</view>
				</view>
				<view class="bianjiziliao_w">上门时段
					<view class="bianjiziliao_e">
						<picker mode="selector" :range="shangmenTimeOptions" :value="shangmen_time_index"
							@change="onTimeChange">
							<view class="bai" style="text-align: right; padding: 0.5em 0;">
								{{ shangmenTimeOptions[shangmen_time_index] || '请选择时段' }}
							</view>
						</picker>
					</view>
				</view>


				<view class="bianjiziliao_w">备注<view class="bianjiziliao_e">
						<textarea class="bai" @input="shuju_beizhu_input" placeholder="请输入备注信息（选填）"
							style="height: 3em; resize: none;" />
					</view>
				</view>

				<view class="bianjiziliao_w">发货电话<view class="bianjiziliao_e">
						<input class="bai" @input="shuju_1fahuodianhua" type="text" placeholder="手机号/区号-固话" />
					</view>
				</view>
				<view class="bianjiziliao_w">收货人<view class="bianjiziliao_e">
						<input class="bai" @input="shuju_1shouhuren" type="text" placeholder="姓名/公司名称" />
					</view>
				</view>
				<view class="bianjiziliao_w">收货电话<view class="bianjiziliao_e">
						<input class="bai" @input="shuju_1shouhurendianhua" type="text" placeholder="手机号/固话" />
					</view>
				</view>
				<view class="bianjiziliao_w">台数<view class="bianjiziliao_e">
						<view
							style="float: right;font-size: 1.4em;font-weight: 900;width: 2em;height: 2em;text-align: center;"
							@click="jiajian1(1)">+</view>
						<view style="width: 4em;float: right;text-align: center;">
							<input readonly :disabled="true" class="bai" style="text-align: center;"
								:placeholder="jaijian" />
						</view>
						<view
							style="float: right;font-size: 1.4em;font-weight: 900;width: 2em;height: 2em;text-align: center;"
							@click="jiajian1(2)">-</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bianjiziliao">
			<view class="bianjiziliao_q">
				<view class="bianjiziliao_w" style="border-bottom: 0 solid rgba(0,0,0,0);">是否还有其它物品
					<view class="bianjiziliao_e">
						<radio-group @change="changeRadio" class="bianjiziliao_e">
							<label v-for="itemxuan in identity" :key="index">
								<radio :value="itemxuan" :checked="itemxuan == radioValue" />{{ itemxuan }}
							</label>
						</radio-group>
					</view>
				</view>
			</view>
		</view>

		<view class="bianjiziliao" v-show="!is_province">
			<view class="bianjiziliao_q">
				<view class="bianjiziliao_w" style="border-bottom: 0 solid rgba(0,0,0,0);">
					<span style="color: red;">*</span>
					包装类型
					<span style="color: red;"> (线下按实际体积支付)</span>
				</view>
				<view class="">
					<radio-group @change="changePackageRadio" style="font-size: 1em;">
						<div
							style="display: flex;justify-content: space-around;align-items: center;margin-bottom: 1em;">
							<radio value="1" />缠膜包装<span style="color: red;">({{ getPacketPt }}元/立方)</span>
							<radio value="2" />电动木架<span style="color: red;">({{ getPacketZy }}元/立方)</span>

						</div>
						<div style="display: flex;justify-content: space-around;align-items: center;">
							<radio value="3" />摩托木架<span style="color: red;">({{ getPacketHh }}元/立方)</span>
							<radio value="4" />木箱铁架<span style="color: red;">({{ getPacketMt }}元/立方)</span>
						</div>

					</radio-group>
				</view>
			</view>
		</view>

		<view class="bianjiziliao" v-show="!is_province">
			<view class="bianjiziliao_q">
				<view class="bianjiziliao_w" style="border-bottom: 0 solid rgba(0,0,0,0);">
					<span style="color: red;">*</span>
					送货方式
					<view class="bianjiziliao_e">
						<radio-group @change="changeDeliveryRadio" class="bianjiziliao_e" style="width: 100%;">
							<radio value="20" />自提
							<radio value="10" />送货
							<text style="color: red;">(+88元)</text>
						</radio-group>
					</view>
				</view>
			</view>
		</view>

		<view class="baojia-card"
			style="background:#fff;border-radius:10px;padding:16px 12px;margin:16px 0 0 0;box-shadow:0 2px 8px #f5f5f5;width: 90%;margin: 0 auto;">
			<view style="display:flex;align-items:center;justify-content:space-between;">
				<text style="font-size:1.1em;font-weight:600;">是否保险</text>
				<switch :checked="isBaojia" @change="onBaojiaChange" style="transform:scale(0.9)" />
			</view>
			<view style="margin-top:8px;color:#888;font-size:0.95em;">
				<text v-if="isBaojia">已选择保险，享受丢失必赔服务</text>
				<text v-else>未保险，货物丢失仅按普通理赔</text>
			</view>
			<view v-if="isBaojia" style="margin-top:12px;">
				<input class="bai" type="number" v-model.trim="baojiaMoney" placeholder="请输入保险金额"
					style="width:100%;border:1px solid #eee;border-radius:6px;padding:10px 12px;font-size:1.1em;" />
				<view style="color:#0099ff;font-size:0.95em;margin-top:6px;">
					保险费：{{ baojiaMoney ? Math.max(baojiaMoney * (baoxianbi / 100), 1).toFixed(2) : '0.00'
					}}元（{{ baoxianbi }}%，最低1元）
				</view>
			</view>
		</view>

		<view class="baojia-card"
			style="background:#fff;border-radius:10px;padding:16px 12px;margin:16px 0 0 0;box-shadow:0 2px 8px #f5f5f5;width: 90%;margin: 1rem auto;">
			<view style="display:flex;align-items:center;justify-content:space-between;">
				<text style="font-size:1.1em;font-weight:600;">定金下单</text>
				<switch :checked="isyufu" @change="onisyufuChange" style="transform:scale(0.9)" />
			</view>
			<view style="margin-top:8px;color:#888;font-size:0.95em;">
				<text v-if="isyufu">已选择定金下单，定金下单金额为<text style="font-size:1.1em;font-weight:600;color: #0099ff;"
						v-if="isyufu">￥:{{ yufukuan }}元，剩余到付</text></text>
				<text v-else>未选择预付，需全额支付</text>
			</view>

		</view>

		<view class="faqizhif">
			<view class="faqizhif_q" @click="xieyixianzhe">
				<radio :checked="yonghuxieyi == 1" style="width: 10px;" />
			</view>
			<view class="faqizhif_w">我已阅读并同意<text>《用户协议》</text></view>
		</view>
		<view class="faqizhif_e"></view>
		<view class="faqizhif_r">
			<view class="faqizhif_t">
				<view class="faqizhif_y">预计￥<text class="faqizhif_u">{{ totalPrice }}</text></view>
				<view class="faqizhif_i" @click="faqizhifce">
					<view class="faqizhif_o"><text v-if="isyufu">预付</text>支付({{ isyufu ? yufukuan : totalPrice }})
					</view>
					<!-- <view class="faqizhif_p">随时可退</view> -->
				</view>

			</view>


		</view>
	</view>

</template>


<script>
import {
	pay
} from '@/common/pay.js';
import { mapGetters } from 'vuex'
export default {
	data() {
		return {
			ordiridde: '',
			order_iddd: '',
			order_address: {
				jishudizhi: '',
				kaishidizhi: ''
			},
			shuju_fahuoren: '',//发货人
			shuju_fahuodianhua: '',//发货电话
			shuju_shouhuren: '',//收货人
			shuju_shouhurendianhua: '',//收货电话
			shangmen_date: '',//上门日期
			shangmen_time: '',//上门时间
			shuju_beizhu: '',//备注
			fenleifen: '',
			radioValue: '是',
			package_method: '0',
			delivery_type: '',
			identity: ['否', '是'],
			yonghuxieyi: 1,
			jaijian: 1,
			balance: '',
			balanceType: false,
			type: 0,
			loading: true,
			order_id: 0,
			/* 0创建订单;10 20保证金 30直播充值 40充值 50预售定金 60d尾款*/
			order_type: 0,
			pay_type: 20,
			checkedPay: [],
			payPrice: '',
			isBaojia: false,
			isyufu: false,
			baojiaMoney: '',
			yufukuan: '',
			yufukuande: '',
			shangmenTimeOptions: ['选择时间', '上午', '中午', '下午', '傍晚'],
			shangmen_time_index: 0,
			baoxianbi: '',
		}
	},
	onLoad(e) {
		let self = this;
		self.order_iddd = e.order_iddd;

		// 设置默认上门时间为当前时间
		self.setDefaultTime();

		uni.showLoading({
			title: '加载中'
		});
		/*获取数据*/
		self.getData();
	},


	methods: {
		faqizhifce() {


			console.log("" + this.shuju_fahuoren + "ASD" + this.shuju_fahuodianhua + "ASD" + this.shuju_shouhuren + "ASD" + this.shuju_shouhurendianhua)
			if (!this.shuju_fahuoren) {
				uni.showToast({
					title: '请输入发货人昵称！',
					icon: 'none'
				})
				return;
			}
			if (!this.shuju_fahuodianhua) {
				uni.showToast({
					title: '请输入发货人电话！',
					icon: 'none'
				})
				return;
			}
			if (!this.shuju_shouhuren) {
				uni.showToast({
					title: '请输入收货人昵称！',
					icon: 'none'
				})
				return;
			}
			if (!this.shuju_shouhurendianhua) {
				uni.showToast({
					title: '请输入收货人电话！',
					icon: 'none'
				})
				return;
			}

			if (this.isBaojia) {

				if (this.baojiaMoney <= 0) {

					uni.showToast({
						title: '请输入保险金额！',
						icon: 'none'
					})
					return;
				}



			}

			let self = this;
			uni.showLoading({
				title: '加载中'
			});
			let url = 'user.order/pay';
			let click_id = self.$store.getters.getClickID;
			let use_balance = self.balanceType == true ? 1 : 0;
			let params = {
				order_id: self.ordiridde,
				pay_source: self.getPlatform(),
				payType: 20,
				use_balance: use_balance,
				shuju_fahuoren: self.shuju_fahuoren,
				shuju_fahuodianhua: self.shuju_fahuodianhua,
				shuju_shouhuren: self.shuju_shouhuren,
				shuju_shouhurendianhua: self.shuju_shouhurendianhua,
				shangmen_time: self.shangmen_date + '-' + self.shangmen_time,
				shuju_beizhu: self.shuju_beizhu,
				taishu: self.jaijian,
				radioValue: self.radioValue,
				package_method: self.package_method,
				delivery_type: self.delivery_type,
				isyufu: self.isyufu,
				isBaojia: self.isBaojia,
				baojiaMoney: self.baojiaMoney,
				baojiaMoneys: Math.max(Number(self.baojiaMoney || 0) * (self.baoxianbi / 100), 2).toFixed(2),

				quhuoshijian: '1',
				click_id:click_id
			};
			self._post(url, params, function (res) {


				self.loading = false;
				uni.hideLoading();
				pay(res, self, self.paySuccess, self.payError);
			});
		},
		jiajian1(tyep) {
			let self = this;
			console.log(1)
			if (tyep == 1) {
				self.jaijian = self.jaijian + 1;
			} else {
				if (self.jaijian <= 1) {
					return;
				} else {
					self.jaijian = self.jaijian - 1;
				}
			}
		},
		//协议选择
		xieyixianzhe() {
			let self = this;
			if (self.yonghuxieyi == 1) {
				self.yonghuxieyi = 0;
			} else {
				self.yonghuxieyi = 1;
			}
		},
		//写数据 
		shuju_1fahuoren(event) {
			let self = this;
			self.shuju_fahuoren = event.detail.value;
		}, shuju_1fahuodianhua(event) {
			let self = this;
			self.shuju_fahuodianhua = event.detail.value;
		}, shuju_1shouhuren(event) {
			let self = this;
			self.shuju_shouhuren = event.detail.value;
		}, shuju_1shouhurendianhua(event) {
			let self = this;
			self.shuju_shouhurendianhua = event.detail.value;
		},
		// 上门日期选择
		onDateChange(e) {
			let self = this;
			self.shangmen_date = e.detail.value;
		},
		// 上门时间选择
		onTimeChange(e) {
			let self = this;
			self.shangmen_time_index = e.detail.value;
			self.shangmen_time = self.shangmenTimeOptions[e.detail.value];
		},
		// 日期选择器变化处理
		onDateSelectChange(e) {
			let self = this;
			self.shangmen_date = e.detail.value;
		},
		// 备注输入
		shuju_beizhu_input(event) {
			let self = this;
			self.shuju_beizhu = event.detail.value;
		},
		// 设置默认时间（当前时间）
		setDefaultTime() {
			let self = this;
			let now = new Date();
			let year = now.getFullYear();
			let month = String(now.getMonth() + 1).padStart(2, '0');
			let day = String(now.getDate()).padStart(2, '0');
			let hours = String(now.getHours()).padStart(2, '0');
			let minutes = String(now.getMinutes()).padStart(2, '0');

			self.shangmen_date = `${year}-${month}-${day}`;
			self.shangmen_time = `${hours}:${minutes}`;
		},
		/*获取数据12212DD*/
		changeRadio(e) {
			this.radioValue = e.detail.value;
		},
		changePackageRadio(e) {
			this.package_method = e.detail.value;
		},
		changeDeliveryRadio(e) {
			this.delivery_type = e.detail.value;
		},
		getData() {
			let self = this;
			self._post('user.Order/pay_chuli', {
				order_id: self.order_iddd,
				click_id: self.$store.getters.getClickID,
			}, function (res) {

				self.yufukuande = res.data.yufukuan;
				self.baoxianbi = res.data.baoxianbi;

				self.ordiridde = res.data.ordiridde;
				self.order_address = res.data.list;
				self.fenleifen = res.data.fenleifen;
				uni.hideLoading();
				self.loading = false;
			});
		},
		onBaojiaChange(e) {
			let self = this;
			self.isBaojia = e.detail.value;

			// if (self.isyufu) {
			// 	self.isyufu = false;
			// 	if (!self.isyufu) {
			// 		self.yufukuan = '';
			// 	}
			// }
			if (!self.isBaojia) {
				self.baojiaMoney = '';
			}
		}, onisyufuChange(e) {
			let self = this;
			self.isyufu = e.detail.value;
			// if (self.isBaojia) {
			// 	self.isBaojia = false;
			// 	if (!self.isBaojia) {
			// 		self.baojiaMoney = '';
			// 	}
			// }

			if (!self.isyufu) {
				self.yufukuan = '';
			} else {
				self.yufukuan = self.yufukuande;
			}

		}
	},



	computed: {
		is_province() {
			if (this.order_address.jishudizhi && this.order_address.kaishidizhi) {
				return this.order_address.jishudizhi.substring(0, 3) === this.order_address.kaishidizhi.substring(0, 3);
			}
			return false;
		},
		baojiaFee() {
			if (this.isBaojia && this.baojiaMoney) {
				return Math.max(Number(this.baojiaMoney) * (this.baoxianbi / 100), 1);
			}
			return 0;
		},
		totalPrice() {
			// console.log('this.delivery_type', this.delivery_type)
			// console.log('this.is_province', this.is_province)
			let base = Number(this.order_address.fenleifen_jiage) * Number(this.jaijian);
			// 送货 && 省外
			if (this.delivery_type == '10' && !this.is_province) {
				return (base + this.baojiaFee + 88).toFixed(2);
			} else {
				return (base + this.baojiaFee).toFixed(2);

			}
		},
		...mapGetters(['getPacketPt', 'getPacketZy', 'getPacketMt', 'getPacketHh','getClickID'])
	}
}
</script>

<style></style>